<template>
  <!-- 学生信息主容器 -->
  <div class="student">
    <!-- 页面主体布局容器 -->
    <div class="page-middle">
      <!-- 左侧信息面板 -->
      <div class="page-middle-left">
        <!-- 板块一：学生基本信息 -->
        <div class="page-middle-left-one">
          <div class="flex align-center">
            <div class="title">基本信息</div>
            <!-- <select v-model="personCode" class="month-select" @change="onStudentChange" style="min-width: 200px;"
              v-px-to-vw>
              <option value="24120001020383">张三 (24120001020383)</option>
              <option value="24120001020023">李四 (24120001020023)</option>
              <option value="24120001020145">王五 (24120001020145)</option>
              <option value="140107200701070114">赵六 (140107200701070114)</option>
              <option value="14120001020432">李四是是是 (14120001020432)</option>
              <option value="140107200701070114">啊啊啊啊 (140107200701070114)</option>
              <option value="23120002120084">张少时诵诗书三 (23120002120084)</option>
              <option value="22120001020269">荣誉特长 (22120001020269)</option>
            </select> -->
          </div>
          <!-- 基本信息内容容器 - 使用多边形裁剪效果 -->
          <div class="context">
            <!-- 左侧：头像和姓名区域 -->
            <div class="stu-base-left">
              <!-- <img class="stu-base-toux" @click="showStuInfoList" src="@/assets/images/profile/students/stu_sex_nv.png" alt=""> -->
              <img class="stu-base-toux" @click="showStuInfoList" :src="studentInfo.gender === '男' ? stuTxNan : stuTxNv"
                :alt="studentInfo.name">
              <!-- 在校状态标签 -->
              <div class="stu-base-zxzt">
                {{ studentInfo.studentStatus || '正常在校' }}
              </div>
              <div class="stuname">
                {{ loading ? '加载中...' : studentInfo.name }}
                <img :src="getGenderIcon(studentInfo.gender)" :alt="studentInfo.gender === '男' ? '男' : '女'"
                  class="stusex">
                <!-- 临时测试按钮：切换性别 -->

              </div>
              <div class="stu-base-time">入学时间:{{ studentInfo.enrollmentYear }} -
                预毕业时间{{ studentInfo.graduationYear }}
              </div>
            </div>
            <!-- 右侧：详细信息网格布局 -->
            <div class="stu-base-right">
              <div class="stu-info-base">{{ studentInfo.grade }}（{{ studentInfo.class }}）</div>
              <div class="stu-info-base">学号:&nbsp;&nbsp;{{ studentInfo.studentId }}</div>
              <div class="stu-info-base">出生日期:&nbsp;&nbsp;{{ studentInfo.birthDate }}</div>
              <div class="stu-info-base">证件类型:&nbsp;&nbsp;{{ studentInfo.idType }}</div>
              <div class="stu-info-base">监护人姓名:&nbsp;&nbsp;{{ studentInfo.guardianName }}</div>
              <div class="stu-info-base">监护人联系方式:&nbsp;&nbsp;{{ studentInfo.guardianPhone }}</div>
              <div class="stu-info-base">学籍类型:&nbsp;&nbsp;{{ studentInfo.studentType }}</div>
              <div class="stu-info-base">学籍状态:&nbsp;&nbsp;{{ studentInfo.studentStatus }}</div>
            </div>
          </div>
        </div>
        <!-- 板块二：课程与考勤信息 -->
        <div class="page-middle-left-two">
          <div class="title">课程与考勤</div>
          <div class="context">
            <!-- 课程考勤内容容器 -->
            <div class="kq-wk">
              <!-- 课程安排区域 -->
              <div class="kechengKaoQ">
                <div class="c-title">课程安排</div>
                <!-- 新高考选课区域 -->
                <div class="kechengKaoQ-context">
                  <div class="item-title">新高考选课</div>
                  <!-- 选课按钮容器 -->
                  <div class="course-gaokxk">
                    <div class="course-gaokxk-box">
                      <input type="button" class="course-gaokxk-btn" value="物理"/>
                    </div>
                    <div class="course-gaokxk-box">
                      <input type="button" class="course-gaokxk-btn" value="化学"/>
                    </div>
                    <div class="course-gaokxk-box">
                      <input type="button" class="course-gaokxk-btn" value="生物"/>
                    </div>
                  </div>
                </div>
                <!-- 选修课程区域 -->
                <div class="kechengKaoQ-context">
                  <div class="item-title">选修课程</div>
                  <!-- 选修课按钮容器 -->
                  <div class="course-gaokxk">
                    <div class="course-gaokxk-box">
                      <input type="button" class="course-gaokxk-btn" value="生物与生活"  />
                    </div>
                    <div class="course-gaokxk-box">
                      <input type="button" class="course-gaokxk-btn" value="人本主义团体辅导活动" />
                    </div>
                    <div class="course-gaokxk-box">
                      <input type="button" class="course-gaokxk-btn" value="宇宙探秘" />
                    </div>
                    <!-- <div class="course-gaokxk-box">
                      <input type="button" class="course-gaokxk-btn" value="英语好文精读"
                             @click="showDialog('英语好文精读')"/>
                    </div> -->
                  </div>
                </div>
              </div>
              <!-- 考勤统计区域 -->
              <div class="kechengKaoQ t1">
                <div class="kqtj-wk">
                  <div class="c-title">考勤统计</div>
                  <!-- 月份选择下拉框 -->
                  <select v-model="selectedMonth" class="month-select" @change="onMonthChange">
                    <option v-for="month in monthOptions" :key="month.value" :value="month.value">
                      {{ month.label }}
                    </option>
                  </select>
                </div>
                <div class="kechengKaoQ-context">
                  <!-- 考勤数据展示容器 -->
                  <div class="kechengKaoQ-context-wk">
                    <!-- 请假天数 -->
                    <div class="kqts-box">
                      <div class="bj qingjia-bj"><span class="bj-text qingjia-text">2天</span></div>
                      <div class="bj-desc">请假天数</div>
                    </div>
                    <!-- 早退天数 -->
                    <div class="kqts-box">
                      <div class="bj zaotui-bj"><span class="bj-text zaotui-text">0天</span></div>
                      <div class="bj-desc">早退天数</div>
                    </div>
                    <!-- 迟到天数 -->
                    <div class="kqts-box">
                      <div class="bj chidao-bj"><span class="bj-text chidao-text">1天</span></div>
                      <div class="bj-desc">迟到天数</div>
                    </div>
                    <!-- 缺勤天数 -->
                    <div class="kqts-box">
                      <div class="bj queqing-bj"><span class="bj-text queqing-text">1天</span></div>
                      <div class="bj-desc">缺勤天数</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 板块三：荣誉特长信息 -->
        <div class="page-middle-left-three">
          <div class="title">荣誉特长</div>
          <div class="context">
            <!-- 荣誉特长主容器 -->
            <div class="rongytch">
              <!-- 特长标签区域 - 使用椭圆分布布局 -->
              <div class="rongytch-box1">
                <!-- 特长标签 - 通过JS动态定位到椭圆轨迹上 -->
                <!-- <div style="width: 100%; height: 100%; position: relative;">
                  <div class="aih">跳远</div>
                  <div class="aih">跆拳道</div>
                  <div class="aih">跳高</div>
                  <div class="aih">羽毛球</div>
                  <div class="aih">唱歌</div>
                  <div class="aih">钢琴</div>
                  <div class="aih">数学竞赛</div>
                  <div class="aih">古筝</div>  
                </div> -->
                <div v-if="isHonorData" class="rybq" ref="popChart"></div>
                <div v-else style="width: 100%; padding-top: 20px; font-size: 14px; color: #ffffff; text-align: center;"
                  v-px-to-vw>
                  暂无数据
                </div>
              </div>
              <!-- 荣誉时间线区域 -->
              <div class="rongytch-box2">
                <!-- 荣誉标题 -->
                <div>
                  <div class="rytc-title">
                    荣誉
                  </div>
                </div>
                <!-- 双列时间线容器 -->
                <div style="display: flex; height: 90%; padding: 0 40px;">
                  <!-- 左侧时间线 -->
                  <div v-if="isHonorList" class="rongytch-box2-timeline">
                    <el-timeline>
                      <el-timeline-item v-for="(item, index) in timelineDataLeft" :key="index" :timestamp="item.date">
                        {{ item.text }}
                      </el-timeline-item>
                    </el-timeline>
                  </div>
                  <!-- 右侧时间线 -->
                  <div v-if="isHonorList" class="rongytch-box2-timeline">
                    <el-timeline>
                      <el-timeline-item v-for="(item, index) in timelineDataRight" :key="index" :timestamp="item.date">
                        {{ item.text }}
                      </el-timeline-item>
                    </el-timeline>
                  </div>
                  <div v-else class="rytc-empty" v-px-to-vw> </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间区域：学生照片展示 -->
      <div class="page-middle-center">
        <div class="tab-menus-wk">
          <!-- 学生照片展示区域 -->
          <div class="student-photo-container">
            <img v-if="studentInfo.gender === '男'" class="student-photo"
              src="@/assets/images/profile/students/stu_sex_nan.png" alt="学生照片" />
            <img v-if="studentInfo.gender === '女'" class="student-photo"
              src="@/assets/images/profile/students/stu_sex_nv.png" alt="学生照片" />
            <div class="student-photo-name stu-name-mid">
              {{ studentInfo.name || "张三" }}
            </div>
            <div v-if="honor_talent_data[0]" :key="item" class="rytcbq-bq rytcbq-bq-bj-position_1"
              :style="{ backgroundImage: 'url(' + backgroundImages[0] + ')' }">{{ honor_talent_data[0] }}</div>
            <div v-if="honor_talent_data[1]" :key="item" class="rytcbq-bq rytcbq-bq-bj-position_2"
              :style="{ backgroundImage: 'url(' + backgroundImages[1] + ')' }">{{ honor_talent_data[1] }}</div>
            <div v-if="honor_talent_data[2]" :key="item" class="rytcbq-bq rytcbq-bq-bj-position_3"
              :style="{ backgroundImage: 'url(' + backgroundImages[2] + ')' }">{{ honor_talent_data[2] }}</div>
          </div>
        </div>
      </div>

      <!-- 右侧区域：详细信息标签页 -->
      <div class="page-middle-right">
        <!-- 右侧内容容器 - 使用rightinfo3x.png作为背景边框 -->
        <div class="right-content-container">
          <!-- 标签页菜单容器 -->
          <div class="tab-menus-wk">
            <ul class="tab-menus">
              <li class="menu-box" :class="{ 'active': currentTab === 'study' }">
                <router-link @click.native="currentTab = 'study'"
                  :to="{ path: '/study', query: { personCode: personCode } }">学习</router-link>
              </li>
              <li class="menu-box" :class="{ 'active': currentTab === 'life' }">
                <router-link @click.native="currentTab = 'life'"
                  :to="{ path: '/life', query: { personCode: personCode } }">生活</router-link>
              </li>
              <li class="menu-box" :class="{ 'active': currentTab === 'health' }">
                <router-link @click.native="currentTab = 'health'"
                  :to="{ path: '/health', query: { personCode: personCode } }">健康</router-link>
              </li>
            </ul>
          </div>
          <!-- 路由视图容器 -->
          <div style="width:100%; height: calc(100% - 70px);" v-px-to-vw>
            <router-view />
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗组件 -->
    <csDialoga v-model="dialogVisible" width="50%">
      <div class="dialog-content">
        <h3>{{ dialogTitle }}课程详情</h3>
        <div class="course-info">
          <p><strong>课程名称：</strong>{{ dialogTitle }}</p>
          <p><strong>课程类型：</strong>{{ getCourseType(dialogTitle) }}</p>
          <p><strong>授课教师：</strong>{{ getTeacherName(dialogTitle) }}</p>
          <p><strong>课程时长：</strong>{{ getCourseDuration(dialogTitle) }}</p>
          <p><strong>课程描述：</strong>{{ getCourseDescription(dialogTitle) }}</p>
        </div>
      </div>
    </csDialoga>
    <!-- 学生列表弹窗组件 -->
    <csDialoga v-model="stuInfoListDialogVisible" width="60%">
      <div class="dialog-content-stu">
        <!-- <h3>{{ dialogTitle }}学生信息列表</h3> -->
        <div class="flex" style="justify-content: space-between;">
          <div class="flex">
            <div class="flex align-center">
              学年
              <el-select v-model="gradeValue" clearable size="small" style="width: 100px; margin: 0 10px;">
                <el-option v-for="item in gradeOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
            <div class="flex align-center">
              学级
              <el-select v-model="xuej" clearable size="small" style="width: 100px; margin: 0 10px;">
                <el-option v-for="item in classOptions" :key="item.rxnd" :label="item.rxnd" :value="item.rxnd" />
              </el-select>
            </div>
            <div class="flex align-center">
              班级
              <el-input v-model="classValue" style="width: 160px; margin: 0 10px;" size="small" placeholder="搜索学生所在班级"
                :suffix-icon="Search" />
            </div>
            <div class="flex align-center">
              学号
              <el-input v-model="xueh" style="width: 160px; margin: 0 10px;" size="small" placeholder="搜索学生学号"
                :suffix-icon="Search" />
            </div>
            <div class="flex align-center">
              姓名
              <el-input v-model="xingm" style="width: 160px; margin: 0 10px;" size="small" placeholder="搜索学生姓名"
                :suffix-icon="Search" />
            </div>
            <div class="flex align-center">
              <el-button type="primary" size="small" @click="getStudentList">搜索</el-button>
            </div>
          </div>
          <!-- <el-input v-model="searchValue" style="width: 190px" size="small"  placeholder="搜索学生姓名、学号"  :suffix-icon="Search"  /> -->
        </div>
        <el-table :height="380" highlight-current-row @current-change="handleStuListCurrentChange"
          :data="paginatedTableData" style="width: 100%; margin-top: 20px; cursor: pointer;">
          <el-table-column align="center" prop="xm" label="姓名" />
          <el-table-column align="center" prop="xh" label="学号" />
          <el-table-column align="center" prop="classname" label="班级" />
          <el-table-column align="center" prop="rxnd" label="入学年度" />
        </el-table>
      </div>
      <el-pagination style="justify-content: flex-end; margin: 10px 0;" size="small"
        layout="total, sizes, prev, pager, next, jumper" :total="filteredTableData.length"
        :page-sizes="[10, 20, 30, 50]" v-model:current-page="currentPage" v-model:page-size="pageSize"
        @current-change="handleCurrentChange" @size-change="handleSizeChange">
      </el-pagination>
    </csDialoga>
  </div>
</template>
<script setup>
import { ref, onMounted, provide, computed, nextTick, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { getStudentBaseInfo } from '@/api/student'
import { useParamsStore } from '@/stores/useParamsStore'
import * as echarts from 'echarts'
import { Search } from '@element-plus/icons-vue'
import stuTxNan from '@/assets/images/profile/students/stu_tx_nan.png'
import stuTxNv from '@/assets/images/profile/students/stu_tx_nv.png'

import * as stuApi from '@/api/student'

const currentTab = ref('study')
const stuInfoListDialogVisible = ref(false)
const router = useRouter()
const paramsStore = useParamsStore()
const gradeOptions = ref([])
const classOptions = ref([{
  value: '1',
  label: '1班'
}])
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)

const classValue = ref('')
const gradeValue = ref('')
const xuej = ref('')
const xueh = ref('')
const xingm = ref('')
  

const searchValue = ref('')

// 分页相关方法
const paginatedTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredTableData.value.slice(start, end)
})

const filteredTableData = computed(() => {
  if (!searchValue.value) {
    return tableData.value
  }
  
  const searchLower = searchValue.value.toLowerCase()
  return tableData.value.filter(item => 
    (item.xm && item.xm.toLowerCase().includes(searchLower)) || 
    (item.xh && item.xh.toLowerCase().includes(searchLower))
  )
})


const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1 // 改变页面大小时回到第一页
}




// 所有学年信息
const school_year = async () => {
  const res = await stuApi.school_year()
  gradeOptions.value = res.data
  console.log("school_year",res);
}


//所有学级信息
const grade_year = async () => {
  const res = await stuApi.grade_year()
  console.log("grade_year",res);
  classOptions.value = res.data
}


// 学生切换-根据条件筛选学生
const getStudentList = async () => {
  const query = {
    yearName: gradeValue.value,
    rxnd: xuej.value,
    className: classValue.value,
    xh:xueh.value,
    xm: xingm.value
  }
  const res = await stuApi.getStudentList(query)
  tableData.value = res.data
  currentPage.value = 1
}

const handleStuListCurrentChange = (currentRow, oldCurrentRow) => {
  personCode.value = currentRow.xh;
  paramsStore.updatePersonCode(personCode.value)
  // 重新获取学生基本信息
  fetchStudentInfo()
  // 通知子组件更新数据
  updateChildComponents()
  stuInfoListDialogVisible.value = false;
}

// 导入背景图片
import rytcWk1 from '@/assets/images/profile/rytc-wk1.png'
import rytcWk2 from '@/assets/images/profile/rytc-wk2.png'
import rytcWk3 from '@/assets/images/profile/rytc-wk3.png'


function getStatusStyle(status) {
  if (status === '优秀') {
    return 'color: #00FFF0;'
  } else if (status === '良好') {
    return 'color: #faff0d;'
  } else {
    return 'color: #FFF;'
  }
}

// 随机背景图数组
const backgroundImages = [  rytcWk1,  rytcWk2, rytcWk3 ]

// 显示学生列表
const showStuInfoList = async () => {
  stuInfoListDialogVisible.value = true
  // getStudentList();
}

const popChart = ref(null)
let chart = ref(null)
// const plantCap = ['跳远', '跆拳道', '跳高', '羽毛球', '唱歌', '钢琴', '数学竞赛', '古筝'];
const datalist = [[15, 35], [40, 80], [60, 35], [80, 75], [15, 25], [63, 65], [36, 25], [64, 25], [63, 75]];
const colorList = ['#FFF500', '#00FFF0', '#16FF49', '#2DC0FF'];
const initChart = (plantCap) => {
  // await nextTick();
  // honor_talent_data.value = plantCap;

  nextTick(() => {
    if (!popChart.value) return
    chart.value = echarts.init(popChart.value)
    const datas = [];
    for (var i = 0; i < plantCap.length; i++) {
      var item = plantCap[i];
      datas.push({
        name: item,
        value: datalist[i],
        label: {
          normal: {
            textStyle: {
              fontSize: (Math.random() * 9) + 12,
              fontWeight: 'bold',
              color: colorList[i % colorList.length],
              shadowColor: 'rgba(255, 255, 255, 0.6)',
              shadowBlur: 10,
              shadowOffsetX: 5,
              shadowOffsetY: 5 
            }
          }
        }
      })
    }
    const option = {
      grid: {
        left: 0,
        right: 0,
        bottom: 0,
        top: 0
      },
      xAxis: [{
        gridIndex: 0,
        type: 'value',
        show: false,
        min: 0,
        max: 100,
        nameLocation: 'middle',
        nameGap: 5
      }],
      yAxis: [{
        gridIndex: 0,
        min: 0,
        max: 100,
        show: false,
        nameLocation: 'middle',
        nameGap: 5
      }],
      series: [{
        type: 'scatter',
        symbol: 'circle',
        symbolSize: 0,
        label: {
          normal: {
            show: true,
            formatter: '{b}',
          },
        },
        data: datas
      }]
    };
    chart.value.setOption(option)
  })
}
// 学生信息数据
const studentInfo = ref({
  name: '',
  gender: '男',
  studentId: '',
  birthDate: '',
  idType: '',
  guardianName: '',
  guardianPhone: '',
  studentType: '',
  studentStatus: '',
  enrollmentYear: '',
  graduationYear: '',
  grade: '',
  class: '',
  rxnd: ''
})

// 加载状态
const loading = ref(false)

// 错误状态
const error = ref('')

// personCode输入值
const personCode = ref('')
paramsStore.updatePersonCode(personCode)


const default_student = async () => {
  const res = await stuApi.default_student(personCode.value)
    if (res.data && res.data.length > 0) {
      personCode.value = res.data[0].value
      paramsStore.updatePersonCode(personCode.value)
    }
    return res
}

// 学生切换处理函数
const onStudentChange = () => {
  // 重新获取学生基本信息
  fetchStudentInfo()
  // 通知子组件更新数据
  updateChildComponents()
}

// 通知子组件更新数据
const updateChildComponents = () => {
  // 通过路由参数更新子组件
  const currentRoute = router.currentRoute.value
  if (currentRoute.path.includes('/health') || currentRoute.path.includes('/study') || currentRoute.path.includes('/life')) {
    paramsStore.updatePersonCode(personCode.value)
    router.push({
      path: currentRoute.path,
      query: {
        ...currentRoute.query,
        personCode: personCode.value
      }
    })
  }
  honor_talent_keys();
  honor_talent_list();
}

// 提供当前选中的学生信息给子组件
provide('currentPersonCode', personCode)
provide('onStudentChange', onStudentChange)

// 获取性别图标的方法
const getGenderIcon = (gender) => {
  if (gender === '男') {
    return new URL('@/assets/images/profile/students/m.svg', import.meta.url).href
  } else {
    return new URL('@/assets/images/profile/students/w.svg', import.meta.url).href
  }
}

// 切换性别测试方法
const toggleGender = () => {
  studentInfo.value.gender = studentInfo.value.gender === '男' ? '女' : '男'
  studentInfo.value.name = studentInfo.value.gender === '男' ? '张三' : '李四'
}

// 弹窗显示状态
const dialogVisible = ref(false)

// 弹窗标题
const dialogTitle = ref('')

// 月份选择相关数据
const selectedMonth = ref(new Date().getMonth() + 1) // 默认选择当前月份
const monthOptions = ref([
  { value: 1, label: '1月' },
  { value: 2, label: '2月' },
  { value: 3, label: '3月' },
  { value: 4, label: '4月' },
  { value: 5, label: '5月' },
  { value: 6, label: '6月' },
  { value: 7, label: '7月' },
  { value: 8, label: '8月' },
  { value: 9, label: '9月' },
  { value: 10, label: '10月' },
  { value: 11, label: '11月' },
  { value: 12, label: '12月' }
])

// 月份变化处理函数
const onMonthChange = () => {
  console.log('选择的月份:', selectedMonth.value)
  // 这里可以添加获取对应月份考勤数据的逻辑
}

// 荣誉时间线数据
const timelineData = [
  { date: '2023.09', text: '入学测试成绩优异' },
  { date: '2023.10', text: '获得数学竞赛二等奖' },
  { date: '2023.11', text: '参与校级科研项目' }
]

const timelineDataLeft = ref([])
const timelineDataRight = ref([])

// 课程详情数据 (模拟数据)
const courseDetails = {
  '物理': {
    type: '必修',
    teacher: '李老师',
    duration: '1.5小时',
    description: '物理是自然科学的基础，主要研究物质、能量、空间和时间的关系。'
  },
  '化学': {
    type: '必修',
    teacher: '王老师',
    duration: '1.5小时',
    description: '化学是研究物质的性质、组成、结构、变化和应用的科学。'
  },
  '生物': {
    type: '必修',
    teacher: '张老师',
    duration: '1.5小时',
    description: '生物学是研究生命现象和生命活动规律的科学。'
  },
  '生物与生活': {
    type: '选修',
    teacher: '赵老师',
    duration: '1小时',
    description: '生物与生活课程旨在培养学生对生物学的兴趣，并将其应用于日常生活中。'
  },
  '人本主义团体辅导活动': {
    type: '选修',
    teacher: '钱老师',
    duration: '1.5小时',
    description: '人本主义团体辅导活动旨在帮助学生建立良好的人际关系和社交能力。'
  },
  '宇宙探秘': {
    type: '选修',
    teacher: '孙老师',
    duration: '1.5小时',
    description: '宇宙探秘课程将带领学生探索宇宙的奥秘，了解天文学的基础知识。'
  },
  '英语好文精读': {
    type: '选修',
    teacher: '周老师',
    duration: '1小时',
    description: '英语好文精读课程将帮助学生提高英语阅读理解能力，并学习优秀的英语文章。'
  }
}

// 获取课程类型
const getCourseType = (courseName) => {
  return courseDetails[courseName] ? courseDetails[courseName].type : '未知';
}

// 获取授课教师
const getTeacherName = (courseName) => {
  return courseDetails[courseName] ? courseDetails[courseName].teacher : '未知';
}

// 获取课程时长
const getCourseDuration = (courseName) => {
  return courseDetails[courseName] ? courseDetails[courseName].duration : '未知';
}

// 获取课程描述
const getCourseDescription = (courseName) => {
  return courseDetails[courseName] ? courseDetails[courseName].description : '暂无描述';
}

// 显示弹窗
const showDialog = (courseName) => {
  dialogTitle.value = courseName;
  dialogVisible.value = true;
}

// 获取学生信息的方法
const fetchStudentInfo = async () => {
  loading.value = true
  error.value = ''
  try {
    // 使用用户输入的personCode作为参数
    const response = await getStudentBaseInfo(personCode.value)

    console.log('API响应:', response)

    if (response.code === 0 && response.data && response.data.length > 0) {
      const data = response.data[0]

      // 将API数据映射到界面显示字段
      studentInfo.value = {
        name: data.xm || '',
        gender: data.xb || '男',
        studentId: data.xh || '',
        birthDate: data.sfzjh == '' ? '' : data.sfzjh.length == 18 ? data.sfzjh.substring(6, 14) : data.sfzjh.substring(7, 15), // 从身份证号提取出生日期
        idType: data.zhjlx || '',
        guardianName: data.jianhr || '',
        guardianPhone: data.phone || '',
        studentType: data.xuejlx || '',
        studentStatus: data.xuejzht || '',
        enrollmentYear: data.rxnd || '', // 使用入学学年字段
        graduationYear: data.rxnd ? (parseInt(data.rxnd) + 3).toString() : '', // 入学时间加3年
        grade: data.gradename || '',
        class: data.classname || '',
        rxnd: data.rxnd || ''
      }

      // 格式化出生日期显示
      if (studentInfo.value.birthDate && studentInfo.value.birthDate.length >= 8) {
        const year = studentInfo.value.birthDate.substring(0, 4)
        const month = studentInfo.value.birthDate.substring(4, 6)
        const day = studentInfo.value.birthDate.substring(6, 8)
        studentInfo.value.birthDate = `${year}.${month}.${day}`
      } else {
        studentInfo.value.birthDate = ''
      }

      // console.log('处理后的学生信息:', studentInfo.value)
    } else {
      // console.warn('API返回数据格式异常:', response)
      error.value = '未找到学生信息或数据格式异常'
      setDefaultStudentInfo()
    }
  } catch (error) {
    // console.error('获取学生信息失败:', error)
    error.value = '网络请求失败，请检查网络连接'
    setDefaultStudentInfo()
  } finally {
    loading.value = false
  }
}

// 设置默认学生信息
const setDefaultStudentInfo = () => {
  const defaultEnrollmentYear = '2024'
  studentInfo.value = {
    name: '聂子琦',
    gender: '男',
    studentId: '24120002120005',
    birthDate: '2009.07.26',
    idType: '第二代身份证',
    guardianName: '监护人',
    guardianPhone: '13663618116',
    studentType: '正式',
    studentStatus: '在学',
    enrollmentYear: defaultEnrollmentYear,
    graduationYear: (parseInt(defaultEnrollmentYear) + 3).toString(), // 入学时间加3年
    grade: '高二',
    class: '高中2024级01班',
    rxnd: defaultEnrollmentYear
  }
}

// 特长标签椭圆分布布局函数
const dt = () => {
  const container = document.querySelector('.rongytch-box1 > div');
  const items = container.querySelectorAll('div[class^="aih"]');
  const centerX = container.offsetWidth / 2;
  const centerY = container.offsetHeight / 2;
  const radiusX = 190; // 椭圆X轴半径
  const radiusY = 28;  // 椭圆Y轴半径

  items.forEach((item, index) => {
    // 计算椭圆轨迹上的位置
    const angle = (index / items.length) * 2 * Math.PI;
    const x = centerX + radiusX * Math.cos(angle);
    const y = centerY + radiusY * Math.sin(angle);
    item.style.left = `${x}px`;
    item.style.top = `${y}px`;

    // 随机字体大小 (18-26px)
    const randomFontSize = Math.floor(Math.random() * 9) + 18;
    item.style.fontSize = `${randomFontSize}px`;

    // 随机HSL颜色
    const hue = Math.floor(Math.random() * 360);
    item.style.color = `hsl(${hue}, 70%, 45%)`;
    //item.style.backgroundColor = `hsla(${(hue + 30) % 360}, 60%, 80%, 0.8)`;
  });
}

const isHonorData = ref(false)
const honor_talent_data = ref([])
// 荣誉特长关键字
const honor_talent_keys = async () => {
  stuApi.honor_talent_keys(personCode.value).then(res => {
    honor_talent_data.value = [];
    if (res.data.length > 0) {
      var keyData = res.data.map(item => item.name);
      isHonorData.value = true;
      honor_talent_data.value = keyData
      initChart(keyData);
    }
    else {
      isHonorData.value = false;
      initChart([]);
    }
  });
}

const isHonorList = ref(false)
// 荣誉特长列表
const honor_talent_list = async () => {
  stuApi.honor_talent_list(personCode.value, 6).then(res => {
    if (res.data.length > 0) {
      isHonorList.value = true;
      var teimdate = res.data.map(item => ({ date: formatDateToYearMonth(item.date), text: item.name }));
      timelineData.value = teimdate;
      splitTimelineData();
    } else {
      isHonorList.value = false;
      timelineDataLeft.value = [];
      timelineDataRight.value = [];
    }
  });
}

// 添加日期格式化函数
const formatDateToYearMonth = (dateString) => {
  if (!dateString) return '';

  // 支持多种日期格式
  const date = new Date(dateString);
  if (isNaN(date.getTime())) return dateString; // 如果日期无效，返回原始字符串

  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  return `${year}.${month}`;
};

const splitTimelineData = () => {
  const data = timelineData.value;
  const mid = Math.ceil(data.length / 2);

  timelineDataLeft.value = data.slice(0, mid);
  timelineDataRight.value = data.slice(mid);
};



onMounted(() => {
  nextTick(async () => {
    await default_student()
    
    // 获取学生信息
    fetchStudentInfo();

    honor_talent_keys()
    honor_talent_list()

    grade_year();
    school_year();

    refreshDataInterval();
  })
})

onUnmounted(() => { 
  if(ref_setInterval.value)
  {
    clearInterval(ref_setInterval.value);
    ref_setInterval.value = null;
  }
})

const ref_setInterval = ref(null);
const refreshDataInterval = () => { 
  if (import.meta.env.VITE_API_REFRESH_IsEnable == 0) {
    ref_setInterval.value = setInterval(() => {
      honor_talent_keys()
      honor_talent_list()
    }, import.meta.env.VITE_API_REFRESH_INTERVAL);
  }
}

</script>
<style scoped="student" lang="scss">
/* 学生信息页面主样式 */
.student {
  display: flex;
  flex-direction: column;
  height: calc(100% - 20px);
  width: calc(100% - 40px);
  margin: 10px 20px;
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: rgba(22, 40, 56, 0.5);

  // 科技感发光边框效果
  position: relative;
  border-radius: 8px;

  // // 创建伪元素实现发光边框
  // &::before {
  //   content: '';
  //   position: absolute;
  //   top: -2px;
  //   left: -2px;
  //   right: -2px;
  //   bottom: -2px;
  //   background: linear-gradient(45deg, #00a7ff, #00fff0, #00ffb2, #00a7ff);
  //   background-size: 400% 400%;
  //   border-radius: 8px;
  //   z-index: -1;
  //   animation: techGlowBorder 3s ease infinite;
  //   filter: blur(8px);
  //   opacity: 0.8;
  // }

  // // 添加内层边框
  // &::after {
  //   content: '';
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  //   bottom: 0;
  //   border: 1px solid rgba(0, 167, 255, 0.6);
  //   border-radius: 8px;
  //   box-shadow:
  //     inset 0 0 10px rgba(0, 167, 255, 0.3),
  //     0 0 20px rgba(0, 167, 255, 0.2);
  //   z-index: -1;
  // }

  // // 科技感边框动画
  // @keyframes techGlowBorder {
  //   0% {
  //     background-position: 0% 50%;
  //     opacity: 0.5;
  //   }

  //   50% {
  //     background-position: 100% 50%;
  //     opacity: 0.5;
  //   }

  //   100% {
  //     background-position: 0% 50%;
  //     opacity: 0.5;
  //   }
  // }

  .title {
    color: white;
    width: 100%;
    height: 20px;
    line-height: 20px;
    margin: 5px 0;
    text-align: left;
    vertical-align: middle;
    border-left: 4px solid #00a7ff;
    padding-left: 10px;
    border-radius: 2px;
    margin-bottom: 5px;
  }

  /* 页面主体布局 - 三栏布局 */

  .page-middle {
    height: 100%;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;

    /* 左侧信息面板 - 占28%宽度 */

    .page-middle-left {
      width: 28%;
      height: 100%;
      margin-right: 20px;
      display: flex;
      flex-direction: column;

      /* 通用内容容器样式 - 带边框和阴影效果 */

      .context {
        .kq-wk {
          display: flex;
          flex-direction: column;
          width: 100%;
          padding: 15px;
        }

        width: 100%;
        height: calc(100% - 30px);
        border: 3px solid #57dcf9;
        text-align: left;
        vertical-align: middle;
        display: flex;
        box-shadow: 0 0 15px rgba(87, 220, 249, 0.5);
      }

      /* 荣誉特长区域样式 */

      .rongytch {
        width: 100%;
        height: 100%;
        padding: 10px 0;
        box-sizing: border-box;

        /* 特长标签区域 - 占30%高度 */

        .rongytch-box1 {
          flex: 30%;
          width: 100%;
          height: 30%;

          .rybq {
            width: 100%;
            height: 100%;
          }

          /* 特长标签样式 - 绝对定位，支持椭圆分布 */

          .aih {
            position: absolute;
            transform: translate(-50%, -50%);
            white-space: nowrap;
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 15px;
            text-align: center;
            transition: all 0.3s ease;
          }
        }

        /* 荣誉时间线区域 - 占70%高度 */

        .rongytch-box2 {
          flex: 70%;
          height: 70%;

          .rytc-title {
            width: 50px;
            height: 25px;
            margin-left: 25px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            line-height: 25px;
            vertical-align: middle;
            border-radius: 3px;
            background-color: #0d9ea8;
            cursor: pointer;
          }

          /* 时间线容器样式 */

          .rongytch-box2-timeline {
            margin-top: 16px;
            flex: 1;
            justify-items: start;
          }

          // 修改 rytc-empty 类的背景图片路径
          .rytc-empty {
            background-image: url('@/assets/images/profile/students/rytc_empty.png');
            // background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            image-rendering: pixelated;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }

      /* 板块一：基本信息区域 - 占20%高度 */

      .page-middle-left-one {
        height: 24%;

        /* 基本信息容器 */

        .context {
          width: 100%;
          height: calc(100% - 30px);
          padding: 16px 10px;
          box-sizing: border-box;
          position: relative;
          background-image: url("@/assets/images/profile/infpback3x.png");
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          border: none;
          box-shadow: none;
          image-rendering: -webkit-optimize-contrast;
          image-rendering: crisp-edges;
          image-rendering: pixelated;
          image-rendering: -moz-crisp-edges;
          image-rendering: -o-crisp-edges;
          image-rendering: -webkit-crisp-edges;
          image-rendering: crisp-edges;
          image-rendering: pixelated;
          -ms-interpolation-mode: nearest-neighbor;

          color: #e8e8e8;
        }

        /* 左侧：头像和姓名区域 - 占35%宽度 */

        .stu-base-left {
          .stuname {
            font-size: 16px;
          }

          .stusex {
            width: 16px;
            height: 16px;
          }

          flex: 30%;
          height: 100%;
          position: relative;
          padding-left: 5px;
          color: #e8e8e8;

          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          /* 学生头像样式 - 圆形边框带发光效果 */

          .stu-base-toux {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            text-align: center;
            /* border: 3px solid #57DCF9; */
            box-shadow: 0 0 15px #57dcf9, inset 0 0 15px rgba(87, 220, 249, 0.2);
            padding: 3px;
            margin-bottom: 8px;
            cursor: pointer;
          }

          .stu-base-zxzt {
            position: absolute;
            top: 10%;
            right: 10%;
            padding: 3px;
            font-size: 12px;
            border-radius: 3px;
            color: #000;
            background-color: #58ff2d;
          }

          /* 入学时间文字样式 */

          .stu-base-time {
            font-size: 8px;
            color: #a9a9a9;
            margin-top: 8px;
          }
        }

        /* 右侧：详细信息网格布局 - 占65%宽度 */

        .stu-base-right {
          flex: 70%;
          height: 100%;
          display: grid;
          padding: 10px;
          box-sizing: border-box;
          flex-wrap: wrap;
          grid-template-columns: 1fr 1fr;
          /* 两列网格布局 */
          color: #e8e8e8;

          /* 信息项样式 */

          .stu-info-base {
            font-size: 10px;
            display: flex;
            align-items: center;
            color: #e8e8e8;
          }
        }
      }

      /* 板块二：课程与考勤区域 - 占35%高度 */

      .page-middle-left-two {
        height: 40%;

        /* 课程考勤容器 */

        .context {
          height: calc(100% - 30px);
          background-image: url("@/assets/images/profile/backTest3x.png");
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          border: none;
          box-shadow: none;
          image-rendering: -webkit-optimize-contrast;
          image-rendering: crisp-edges;
          image-rendering: pixelated;
          image-rendering: -moz-crisp-edges;
          image-rendering: -o-crisp-edges;
          image-rendering: -webkit-crisp-edges;
          image-rendering: crisp-edges;
          image-rendering: pixelated;
          -ms-interpolation-mode: nearest-neighbor;
        }

        .t1 {
          margin-top: 6px;
        }

        .kechengKaoQ {
          .kqtj-wk {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
          }

          width: 100%;
          // overflow-y: auto;
          /* 子标题样式 */

          .c-title {
            width: 100%;
            font-size: 14px;
            color: #80d3ff;
            font-family: "Source Han Sans CN", "思源黑体", "PingFang SC",
              "Microsoft YaHei", sans-serif;
          }

          /* 课程考勤内容区域 */

          .kechengKaoQ-context {
            .item-title {
              margin-top: 10px;
              font-size: 13px;
              color: white;
            }

            margin: 0 10px;
            width: calc(100% - 20px);
            font-size: 12px;

            /* 课程按钮容器 */

            .course-gaokxk {
              display: flex;
              margin-top: 5px;
              gap: 10px;
              flex-wrap: wrap;

              /* 课程按钮包装器 */

              .course-gaokxk-box {
                flex: 1;
                height: 30px;
                display: flex;
                align-items: center;
              }

              /* 考勤统计容器（未使用） */

              .kaoqtj {
                border: 1px solid red;
                display: flex;
                justify-content: center;
                align-items: center;
                flex: 1;
              }

              /* 课程按钮样式 */

              .course-gaokxk-btn {
                min-width: 100px;
                height: 30px;
                border: 2px solid #00fff0;
                border-radius: 3px;
                background: linear-gradient(135deg,
                    rgba(0, 255, 240, 0.1),
                    rgba(0, 255, 240, 0.05));
                color: #00fff0;
                font-size: 11px;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                cursor: pointer;
                transition: all 0.3s ease;
              }

              /* 选修课程按钮特殊样式 */

              .course-gaokxk-btn[value="生物与生活"],
              .course-gaokxk-btn[value="人本主义团体辅导活动"],
              .course-gaokxk-btn[value="宇宙探秘"],
              .course-gaokxk-btn[value="英语好文精读"] {
                border: 2px solid #00ffb2;
                color: #00ffb2;
                font-size: 11px;
                border-radius: 3px;
                background: linear-gradient(135deg,
                    rgba(0, 255, 178, 0.1),
                    rgba(0, 255, 178, 0.05));
              }

              /* 鼠标悬停时增强背景效果 */

              .course-gaokxk-btn:hover {
                background: linear-gradient(135deg,
                    rgba(0, 255, 240, 0.2),
                    rgba(0, 255, 240, 0.1));
              }

              /* 选修课程按钮悬停效果 */

              .course-gaokxk-btn[value="生物与生活"]:hover,
              .course-gaokxk-btn[value="人本主义团体辅导活动"]:hover,
              .course-gaokxk-btn[value="宇宙探秘"]:hover,
              .course-gaokxk-btn[value="英语好文精读"]:hover {
                background: linear-gradient(135deg,
                    rgba(0, 255, 178, 0.2),
                    rgba(0, 255, 178, 0.1));
              }
            }

            /* 考勤统计展示容器 */

            .kechengKaoQ-context-wk {
              flex: 1;
              width: 100%;
              height: 100px;
              display: flex;
              gap: 50px;

              /* 考勤数据圆形背景 */
              .kqts-box {
                cursor: pointer;
                transition: all 0.3s ease;

                &:hover {
                  // 添加发光效果
                  filter: drop-shadow(0 0 8px rgba(0, 255, 240, 0.8));
                  transform: translateY(-5px);

                  // 为子元素添加发光效果
                  .bj {
                    // 添加脉冲发光效果
                    animation: pulseGlow 1.5s infinite;
                  }

                  .bj-text {
                    text-shadow: 0 0 10px rgba(128, 211, 255, 0.9);
                    font-weight: bold;
                    transform: scale(1.1);
                  }

                  .bj-desc {
                    color: #00fff0;
                    text-shadow: 0 0 5px rgba(0, 255, 240, 0.8);
                    font-weight: bold;
                    margin-top: 5px;
                  }
                }
              }

              // 定义脉冲发光动画
              @keyframes pulseGlow {
                0% {
                  filter: drop-shadow(0 0 5px rgba(0, 255, 240, 0.5));
                }

                50% {
                  filter: drop-shadow(0 0 15px rgba(0, 255, 240, 0.8));
                }

                100% {
                  filter: drop-shadow(0 0 5px rgba(0, 255, 240, 0.5));
                }
              }

              // 为不同类型的考勤项定义特定的悬浮效果
              .kqts-box:hover .bj.qingjia-bj {
                animation: pulseGlowGreen 1.5s infinite;
              }

              .kqts-box:hover .bj.zaotui-bj {
                animation: pulseGlowBlue 1.5s infinite;
              }

              .kqts-box:hover .bj.chidao-bj {
                animation: pulseGlowYellow 1.5s infinite;
              }

              .kqts-box:hover .bj.queqing-bj {
                animation: pulseGlowPink 1.5s infinite;
              }

              // 不同颜色的脉冲效果
              @keyframes pulseGlowGreen {
                0% {
                  filter: drop-shadow(0 0 5px rgba(88, 255, 45, 0.5));
                }

                50% {
                  filter: drop-shadow(0 0 15px rgba(88, 255, 45, 0.8));
                }

                100% {
                  filter: drop-shadow(0 0 5px rgba(88, 255, 45, 0.5));
                }
              }

              @keyframes pulseGlowBlue {
                0% {
                  filter: drop-shadow(0 0 5px rgba(0, 224, 255, 0.5));
                }

                50% {
                  filter: drop-shadow(0 0 15px rgba(0, 224, 255, 0.8));
                }

                100% {
                  filter: drop-shadow(0 0 5px rgba(0, 224, 255, 0.5));
                }
              }

              @keyframes pulseGlowYellow {
                0% {
                  filter: drop-shadow(0 0 5px rgba(255, 199, 0, 0.5));
                }

                50% {
                  filter: drop-shadow(0 0 15px rgba(255, 199, 0, 0.8));
                }

                100% {
                  filter: drop-shadow(0 0 5px rgba(255, 199, 0, 0.5));
                }
              }

              @keyframes pulseGlowPink {
                0% {
                  filter: drop-shadow(0 0 5px rgba(241, 70, 142, 0.5));
                }

                50% {
                  filter: drop-shadow(0 0 15px rgba(241, 70, 142, 0.8));
                }

                100% {
                  filter: drop-shadow(0 0 5px rgba(241, 70, 142, 0.5));
                }
              }

              .bj {
                width: 70px;
                height: 70px;
                position: relative;
                background-image: url("@/assets/images/profile/students/qingjtsh.png");
                background-size: 100% 100%;
                background-position: center;
                background-repeat: no-repeat;
                image-rendering: -webkit-optimize-contrast;
                image-rendering: crisp-edges;
                image-rendering: pixelated;
                image-rendering: -moz-crisp-edges;
                image-rendering: -o-crisp-edges;
                image-rendering: -webkit-crisp-edges;
                image-rendering: crisp-edges;
                image-rendering: pixelated;
                -ms-interpolation-mode: nearest-neighbor;

                /* 考勤数字样式 */

                .bj-text {
                  position: absolute;
                  top: 10px;
                  left: 23px;
                  font-size: 18px;
                  font-weight: bold;
                  color: #80d3ff;
                }

                /* 请假天数字体颜色 */
                .qingjia-text {
                  color: #58ff2d !important;
                }

                /* 早退天数字体颜色 */
                .zaotui-text {
                  color: #00e0ff !important;
                }

                /* 迟到天数字体颜色 */
                .chidao-text {
                  color: #ffc700 !important;
                }

                /* 缺勤天数字体颜色 */
                .queqing-text {
                  color: #f1468e !important;
                }

                /* 请假天数特殊背景样式 */
                &.qingjia-bj {
                  background-image: url("@/assets/images/profile/students/qingjtsh.png");
                }

                /* 早退天数特殊背景样式 */
                &.zaotui-bj {
                  background-image: url("@/assets/images/profile/zaotui3x.png");
                }

                /* 迟到天数特殊背景样式 */
                &.chidao-bj {
                  background-image: url("@/assets/images/profile/chidao3x.png");
                }

                /* 缺勤天数特殊背景样式 */
                &.queqing-bj {
                  background-image: url("@/assets/images/profile/queqing3x.png");
                }
              }

              /* 考勤描述文字 */

              .bj-desc {
                text-align: center;
                width: 70px;
                font-size: 12px;
                margin-top: 5px;
              }
            }
          }
        }
      }

      /* 板块三：荣誉特长区域 - 占35%高度 */

      .page-middle-left-three {
        height: 36%;

        /* 荣誉特长容器背景 */

        .context {
          height: calc(100% - 30px);
          background-image: url("@/assets/images/profile/Rongyu3x.png");
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          border: none;
          box-shadow: none;
          image-rendering: -webkit-optimize-contrast;
          image-rendering: crisp-edges;
          image-rendering: pixelated;
          image-rendering: -moz-crisp-edges;
          image-rendering: -o-crisp-edges;
          image-rendering: -webkit-crisp-edges;
          image-rendering: crisp-edges;
          image-rendering: pixelated;
          -ms-interpolation-mode: nearest-neighbor;
        }
      }
    }

    /* 中间区域：学生照片展示 - 占35%宽度 */

    .page-middle-center {
      width: 35%;
      margin-right: 20px;
      height: 100%;

      /* 学生照片背景容器 */

      .tab-menus-wk {
        width: 100%;
        height: calc(100% - 30px);
        background-image: url("@/assets/images/profile/CenterBack3x.png");
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        margin-top: 30px;
        position: relative;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-crisp-edges;
        image-rendering: -webkit-crisp-edges;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        -ms-interpolation-mode: nearest-neighbor;

        /* 学生照片容器样式 */

        .student-photo-container {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 612px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .student-photo-name {
          position: absolute;
          top: 30px;
          right: 40px;
          font-size: 60px;
          cursor: pointer;
        }

        /* 文字核心样式 */
        .stu-name-mid {
          /* 字体设置 */
          font-family: "SimHei", "Microsoft YaHei", "Arial Black", sans-serif;
          font-weight: 900;
          /* 超粗体 */
          letter-spacing: -2px;
          /* 字符间距微调，增强紧凑感 */

          /* 文字颜色与立体效果 */
          color: #ffffff;
          text-shadow:
            3px 3px 0 #0099cc,
            /* 第一层阴影 */
            6px 6px 0 #0077aa,
            /* 第二层阴影 */
            0 0 10px rgba(0, 153, 204, 0.3);
          /* 轻微发光效果 */

          /* 额外装饰 */
          padding: 20px 40px;
          border-radius: 8px;

          /* 过渡效果，可选 */
          transition: transform 0.3s ease;
        }

        /* 鼠标悬停效果（可选） */
        .stu-name-mid:hover {
          transform: scale(1.05);
          /* 轻微放大 */
        }


        .student-label {
          position: absolute;
          bottom: 20%;
          left: 10%;
          width: 160px;
          height: auto;
        }

        /* 学生照片样式 */

        .student-photo {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          border-radius: 10px;
        }
      }

      .rytcbq-bq {
        position: absolute;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        z-index: 10;
        // 宽度自适应内容
        white-space: nowrap;
        padding: 20px 20px;
        min-width: 120px;
        min-height: 40px;
        cursor: pointer;
        // 文字样式
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 18px;
        color: white;
        font-weight: bold;

        // 添加上下跳动动画效果
        animation: bounce 2s ease-in-out infinite;

        @keyframes bounce {
          0% {
            transform: translateY(0px);
          }

          50% {
            transform: translateY(-10px);
          }

          100% {
            transform: translateY(0px);
          }
        }
      }

      .rytcbq-bq-bj-position_1 {
        position: absolute;
        top: 18%;
        left: 5%;
        min-width: 120px;
        min-height: 40px;
        animation-delay: 0s;
      }

      .rytcbq-bq-bj-position_2 {
        position: absolute;
        top: 30%;
        right: 5%;
        min-width: 120px;
        min-height: 40px;
        animation-delay: 0.3s;
      }

      .rytcbq-bq-bj-position_3 {
        position: absolute;
        bottom: 20%;
        left: 10%;
        min-width: 120px;
        min-height: 40px;
        animation-delay: 0.6s;
      }
    }

    /* 右侧区域：详细信息标签页 - 占45%宽度 */

    .page-middle-right {
      width: 45%;
      height: 100%;

      /* 右侧内容容器 - 使用rightinfo3x.png作为背景边框 */

      .right-content-container {
        height: calc(100% - 30px);
        margin-top: 30px;
        padding-left: 10px;
        padding-right: 10px;
        background-image: url("@/assets/images/profile/rightinfo3x.png");
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-crisp-edges;
        image-rendering: -webkit-crisp-edges;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        -ms-interpolation-mode: nearest-neighbor;
      }

      /* 标签页菜单容器 */

      .tab-menus-wk {
        width: 90%;
        height: 70px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      /* 标签页菜单样式 - 使用bqback3x.png作为背景 */

      .tab-menus {
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0;
        margin: 0;
        background-image: url("@/assets/images/profile/bqback3x.png");
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-crisp-edges;
        image-rendering: -webkit-crisp-edges;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        -ms-interpolation-mode: nearest-neighbor;

        /* 菜单项样式 */
        .menu-box.active {
          background: linear-gradient(180deg, rgba(0, 161, 246, 0) 0%, rgba(0, 161, 246, 0.8) 100%);

          a {
            color: #00FFF0;
          }
        }

        .menu-box {
          width: 66px;
          height: 30px;
          line-height: 30px;
          margin: 0 10px;
          text-align: center;

          /* 菜单链接样式 */

          a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
          }
        }
      }
    }
  }
}

/* Element Plus 时间线组件样式覆盖 */
::v-deep .el-timeline-item__tail {
  border-left: 1px dashed #57dcf9;
}

::v-deep .el-timeline-item__content {
  color: #fff;
  font-size: 9px;
}

::v-deep .el-timeline-item__timestamp {
  color: #fff;
  font-size: 8px;
}

::v-deep .el-timeline-item__node--normal {
  background-color: #57dcf9;
}

/* 弹窗内容样式 */
.dialog-content {
  color: #fff;
}

.dialog-content,.dialog-content-stu h3 {
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: bold;
}

.dialog-content-stu {
  color: #00f0ff;
}

.course-info {
  line-height: 1.8;
}

.course-info p {
  margin-bottom: 12px;
  font-size: 14px;
}

.course-info strong {
  color: #00f0ff;
  font-weight: bold;
}

/* 月份选择下拉框样式 */

.month-select {
  width: 95px;
  height: 20px;
  border: 2px solid #00d1ff;
  border-radius: 2px;
  background: radial-gradient(circle,
      rgba(0, 209, 255, 0.1),
      rgba(0, 209, 255, 0.05));
  color: #00fff0;
  font-size: 9px;
  font-family: "Source Han Sans CN", "思源黑体", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  padding: 0 5px;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}

/* 下拉框选项样式 */

.month-select option {
  background-color: rgba(0, 0, 0, 0.8);
  color: #00fff0;
  font-size: 9px;
  padding: 5px;
}

/* 下拉框悬停效果 */

.month-select:hover {
  border-color: #00fff0;
  background: radial-gradient(circle,
      rgba(0, 255, 240, 0.15),
      rgba(0, 255, 240, 0.08));
}

/* 下拉框焦点效果 */

.month-select:focus {
  border-color: #00fff0;
  box-shadow: 0 0 5px rgba(0, 255, 240, 0.3);
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: 0 0 0 1px #00fff0 inset;
  color: #00fff0;
}
::v-deep .el-input__inner {
  color: #fff;
}
::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: 0 0 0 1px #00fff0 inset;
  color: #00fff0;
}
::v-deep .el-table th.el-table__cell {
  background-color: #00BCB1;
  color: #C5D9FB;
}
::v-deep .el-table {
  background-color: transparent;
  color: #fff;
}
::v-deep .el-table tr {
  background-color: transparent;
}
::v-deep .el-select__placeholder {
  color: #fff;
}
::v-deep input::placeholder {
  color: #fff;
}
::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  border-color: #9FFFF9;
}
</style>
